<template>
  <div>
    <!-- v-if条件为真的时候，才会渲染元素 -->
    <el-divider content-position="left">v-if</el-divider>
    <div v-if="num === 1">1</div>
    <div v-else-if="num === 2">2</div>
    <div v-else>3</div>

    <!-- v-show，不管条件是否为真都会渲染元素 -->
    <el-divider content-position="left">v-show</el-divider>
    <div v-show="num === 1">1</div>

    <el-divider content-position="left">列表渲染&条件渲染</el-divider>
    <template v-for="item in list">
      <template v-if="item === 1"> 一 </template>
      <template v-else-if="item === 5"> 五 </template>
      <template v-else>
        <el-button :key="item">{{ item }}</el-button>
      </template>
    </template>

    <!-- 使用v-if，每次切换的时候都会重新渲染元素，比较消耗性能，在频繁切换元素的场景下，建议使用v-show -->
    <el-divider content-position="left">快速切换元素</el-divider>
    <el-button @click="flag = !flag">切换v-show</el-button>
    <customTable v-show="flag"></customTable>
  </div>
</template>

<script>
export default {
  name: "Demo_6",
  data() {
    return {
      num: 3,
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      flag: true,
    };
  },
  mounted() {},
  methods: {},
};
</script>
